let layer;
let form;
layui.use(['layer', 'form'], function() {
  layer = layui.layer;
  form = layui.form;



  // *****************************************1.列表加载
  function list() {
    $.ajax({
      url: "/my/article/cates",
      success: function(res) {
        if (res.status == 0) {
          $("tbody").html("");
          $.each(res.data, function(index, item) {
            let one = $(`<tr>
                        <td>${item.name}</td>
                        <td>${item.alias}</td>
                        <td>
                          <button type="button" class="layui-btn layui-btn-xs btn-edit" _id=${item.Id} _name=${item.name} _alias=${item.alias}>编辑</button>
                          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" _id=${item.Id}>删除</button>
                        </td>
                      </tr>`);

            $("tbody").append(one);
          });
        }
      }
    });



  }
  list();





  // ******************************************2.新增
  let add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
  <div class="layui-form-item">
    <label class="layui-form-label">类别名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类别别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
 </form>`;

  $(".add").on("click", function() {

    // 1.点击后弹窗出现 弹窗调用后返回number值，
    let index = layer.open({
      type: 1,
      title: "新增类名",
      content: add_str,
      area: ['500px', '270px'],
    });

    // 2.弹窗form添加 submit
    $("#add_form").on("submit", function(e) {
      e.preventDefault();

      // 3.收集
      let data = $(this).serialize();

      // 4.提交数据
      $.ajax({
        url: "/my/article/addcates",
        type: "post",
        data: data,
        success: function(res) {
          layer.msg(res.message);
          layer.close(index);
          list();
        }
      });

    });

  });


  // *******************************************3.删除
  $("tbody").on("click", ".btn-delete", function() {
    // 1.id
    let id = $(this).attr("_id");

    layer.confirm('确定要删除么?', function(index) {


      // 2.提交ajax 删除数据
      $.ajax({
        // 动态URL地址：  :id  代表动态传入id值
        url: "/my/article/deletecate/" + id,
        success: function(res) {
          layer.msg(res.message);
          list();
          layer.close(index);
        }
      });

    });



  });




  // **********************************************4编辑
  let edit_str = `<form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
  <div class="layui-form-item">
    <label class="layui-form-label">类别名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类别别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="hidden" name="Id">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    </div>
  </div>
  </form>`;
  $("tbody").on("click", ".btn-edit", function() {
    // 1.拿到点击该项数据 
    //     id  name  alisa
    let Id = $(this).attr("_id");
    let name = $(this).attr("_name");
    let alias = $(this).attr("_alias");


    // 2.准备弹窗
    let index = layer.open({
      type: 1,
      title: "编辑类名",
      content: edit_str,
      area: ['500px', '270px'],
    });


    // 3.数据回填
    form.val("edit", {
      Id: Id,
      name: name,
      alias: alias
    });


    // 4.添加submit
    //    1.收集数据
    //    2.提交数据
    $("#edit_form").on("submit", function(e) {
      e.preventDefault();

      // 3.收集
      let data = $(this).serialize();

      // 4.提交数据
      $.ajax({
        url: "/my/article/updatecate",
        type: "post",
        data: data,
        success: function(res) {
          layer.msg(res.message);
          layer.close(index);
          list();
        }
      });

    });
  });





});